<template>
	<div class="homeIndex" id="mainId">
		<!-- 图表内容 -->
		<div class="home_content flex align-items-end" v-show="echShow">
			<left style="position:absolute;z-index:1001;width:25%;"></left>
			<!-- <middle style="position:absolute;bottom: 0;left: 30%;transfrom:translate(-33%,-50%);z-index:1001;width:40%;"></middle> -->
			<right style="position:absolute;z-index:1001;right:0;width:25%;"></right>
		</div>
		<!-- 弹框 -->
		<div v-show="showtk" class="eject" ref="eject1" id="eject1" :style="{ backgroundImage: bodyBgImage }">
			<div class="close" @click="infoClose">
				×
			</div>
			<p v-if="infoMsg.status == 0" style="color:#13FF04 !important;">{{ infoMsg.link }}</p>
			<p v-if="infoMsg.status == 3" style="color:#21D3FF !important;">{{ infoMsg.link }}</p>
			<p v-if="infoMsg.status == 2" style="color:#FFF904 !important;">{{ infoMsg.link }}</p>
			<p v-if="infoMsg.status == 11" style="color:#F33635 !important;">{{ infoMsg.link }}</p>
			<p>案件号：<span>{{ infoMsg.orderNum }}</span></p>
			<p>采集来源：<span>{{ infoMsg.staFrom }}</span></p>
			<p>一二级分类：<span>{{ infoMsg.aType || '无' }}-{{ infoMsg.bType || '无' }}</span></p>
			<p>当前所在部门：<span>{{ infoMsg.orgName }}</span></p>
			<p>案件截止时间：<span>{{ infoMsg.cutTime }}</span></p>
		</div>
	</div>
</template>
<script>
const baseUrl = process.env.VUE_APP_BASE_URL;
import left from "../../components/home/left"; //左边内容
import middle from "../../components/home/middle"; //中间内容
import right from "../../components/home/right"; //右边内容
import https from '@request/https'
export default {
	data() {
		return {
			map: null,
			echShow: true, //除地图外的内容
			markers: [],
			showtk: false,
			infoMsg: {},
			timer: null,
			timermap: null,
			showText: '全屏',
			bodyBgImage: 'url(' + require('@assets/images/home/clzback.png') + ')',
			temporaryList1: [],
			temporaryList2: [],
			heatmapData: [],
			mapcenter: [112.579364, 37.736195],//地图中心
			mapcon: {}, //点位详情
			infoWindow: null
		};
	},
	components: {
		left,
		middle,
		right,
	},
	created() {

	},
	mounted() {

	},
	methods: {

		getHeat() {
			var heatmap;
			var api = `${baseUrl}/bigData/orderToDoInfo`
			var athis = this
			athis.heatmapData = []
			// heatmap.setMap(null);
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var data1 = res.data.data

					for (let i = 0; i < data1.length; i++) {
						athis.heatmapData.push({
							lng: data1[i].xCoordinate,
							lat: data1[i].yCoordinate,
							count: '1'
						})

					}
					athis.map.plugin(["AMap.Heatmap"], function () {
						//初始化heatmap对象
						heatmap = new AMap.Heatmap(athis.map, {
							radius: 25, //给定半径
							opacity: [0, 0.8],
							gradient: {
								0.2: '#c000ff',
								0.4: '#13FF04',
								0.6: '#FFF904',
								0.8: '#F33635',

							}

						});
						//设置数据集：该数据为北京部分“公园”数据
						heatmap.setDataSet({
							data: athis.heatmapData,
							max: 100
						});
					});
				}
			})
		},
		infoClose() {
			this.showtk = false;
			this.markers.forEach(
				(item) => (item.Ce.contentDom.className = "amap-marker-content")
			);
		},
		// 轮播
		carousel() {
			var athis = this
			clearInterval(this.timer);
			this.timer = null;
			this.showtk = false;
			var lengthnum = []
			var IconSrc = ''
			for (var h = 0; h < athis.markers.length; h++) {
				if (this.markers[h].Ce.data.xCoordinate != 0 || this.markers[h].Ce.data.xCoordinate != '0.0' || this
					.markers[h].Ce.data.xCoordinate != 0.0) {
					if (athis.markers[h].Ce.data.status == 0) {
						IconSrc = require("@assets/images/home/dla1.png");
						athis.markers[h].setIcon(IconSrc)
					} else if (athis.markers[h].Ce.data.status == 11) {
						IconSrc = require("@assets/images/home/duban1.png");
						athis.markers[h].setIcon(IconSrc)
					} else if (athis.markers[h].Ce.data.status == 2) {
						IconSrc = require("@assets/images/home/clz1.png");
						athis.markers[h].setIcon(IconSrc)
					} else if (athis.markers[h].Ce.data.status == 3) {
						IconSrc = require("@assets/images/home/dpq1.png");
						athis.markers[h].setIcon(IconSrc)
					}
					lengthnum.push(this.markers[h])
				}
			}

			var index = Math.floor(Math.random() * lengthnum.length);
			if (lengthnum[index].Ce.data.status == 0) {
				IconSrc = require("@assets/images/home/dla.gif");
				lengthnum[index].setIcon(IconSrc)
			} else if (lengthnum[index].Ce.data.status == 1) {
				IconSrc = require("@assets/images/home/duban.gif");
				// str = `<img src=${IconSrc}  style='width:30px;height:50px'>`;
				lengthnum[index].setIcon(IconSrc)
			} else if (lengthnum[index].Ce.data.status == 2) {
				IconSrc = require("@assets/images/home/dpq.gif");
				lengthnum[index].setIcon(IconSrc)
			} else if (lengthnum[index].Ce.data.status == 3) {
				IconSrc = require("@assets/images/home/clz.gif");
				lengthnum[index].setIcon(IconSrc)
			}

			this.infoMsg = lengthnum[index].Ce.data;
			this.$forceUpdate();
			this.showtk = true;
			var position1 = [Math.floor(this.infoMsg.xCoordinate * 1000000) / 1000000, Math.floor(this.infoMsg
				.yCoordinate * 1000000) / 1000000];
			athis.map.setCenter(position1);
		}
	},
	beforeDestroy() {
		//清除定时器
		clearInterval(this.timer);
		clearInterval(this.timermap);
	},
};
</script>
<style lang="less">
// 弹窗
.amap-marker-label {
	background: transparent;
	border: none;
}

.input-card {
	// height: 120px;
	position: relative;
	display: flex;
	align-items: flex-start;

	img {
		width: 45px;
		margin-right: 20px;
		// width: 63px;
		// height: 100px;
	}

	.input-card1 {
		position: absolute;
		left: -19px;
		bottom: -22px;
	}

	.window-cont {
		width: 265px;
		min-height: 60px;
		padding: 5px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: center;

		p {
			font-size: 14px;
			color: #fff;
			// margin-bottom: 10px;
			white-space: normal;
			word-break: normal;
			line-height: 22px;
		}

		p:last-child {
			margin-bottom: 0;
		}
	}

	.status0 {
		//绿色
		color: #1dfd06;
	}

	.status2 {
		//黄色
		color: #FDEF06;
	}

	.status3 {
		//蓝色
		color: #21D3FF;
	}

	.status11 {
		//红色
		color: #F33635;
	}

	.statusbj0 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(114, 98, 99, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusbj2 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(253, 239, 6, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusbj3 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(33, 211, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusbj11 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(243, 54, 53, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusyuan0 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(114, 98, 99, 0.1);
	}

	.statusyuan2 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(253, 239, 6, 0.1);
	}

	.statusyuan3 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(33, 211, 255, 0.1);
	}

	.statusyuan11 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(243, 54, 53, 0.1);
	}
}

.eject {
	z-index: 9999;
	position: absolute;
	color: #fff !important;
	padding: 26px 27px 12px 10px;
	top: 44%;
	left: 61%;
	transform: translate(-50%, -50%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	// background-image: url('../../assets/images/');

	// border: 1px dashed rgba(33, 211, 255, 1);
	// border-right: 3px solid rgba(33, 211, 255, 1);
	// background-size: 100%;
	p {
		color: #fff !important;

		span {
			color: #fff !important;
		}
	}

	.close {
		width: 20px;
		height: 20px;
		line-height: 17px;
		text-align: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		// color: #2e6aff;
		color: #fff;
		// font-weight: 600;
		position: absolute;
		right: 13px;
		top: 12px;
	}

	.imgs {

		// img {
		//   width: 50px;
		// }
		div:nth-0f-type(2) {
			margin-left: 10px;
		}
	}

	.eject_box {
		color: #fff;

		div {
			font-size: 14px;
			padding-bottom: 2px;

			span:nth-of-type(2) {
				color: #00dfff;
			}
		}
	}

	.mb10 {
		margin-bottom: 10px;
	}
}

.abcdef {
	img {
		position: relative;
		animation: mymove 2s infinite;
		-webkit-animation: mymove 2s infinite;
		/*Safari and Chrome*/
		animation-direction: alternate;
		/*轮流反向播放动画。*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		/* Safari 和 Chrome */
		-webkit-animation: mymove 2s infinite;
		-webkit-animation-direction: alternate;
		/*轮流反向播放动画。*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		// border-bottom: 1px solid red;
		// border-radius: 50%;
		// position: absolute;
		// z-index: 999;
		// top: 30px;
	}
}

@keyframes mymove {
	0% {
		transform: scale(1);
		/*开始为原始大小*/
	}

	25% {
		transform: scale(1.5);
		/*放大1.5倍*/
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(1.5);
	}
}

@-webkit-keyframes mymove

/*Safari and Chrome*/
	{
	0% {
		transform: scale(1);
		/*开始为原始大小*/
	}

	25% {
		transform: scale(1.5);
		/*放大1.5倍*/
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(1.5);
	}
}
</style>
<style lang="less" scoped>
.homeIndex {
	height: 100%;

	.home_bottom {


		// 内容
		.home_content {
			width: calc(100% - 20px);
			height: calc(100% - 20px);
			position: absolute;
			top: 10px;
			left: 10px;
			// border: 1px solid yellow;
			// z-index: 1001;
		}

		.map_large {
			width: 94px;
			height: 34px;
			background: rgba(34, 47, 68, 0.5);
			border-radius: 17px;
			position: absolute;
			top: 10px;
			right: 26%;
			z-index: 9999;
			font-size: 14px;
			font-family: Source Han Sans SC;
			font-weight: bold;
			color: #ffffff;

			img {
				width: 14px;
				margin-right: 10px;
			}
		}

		.newweizhi {
			right: 3% !important;
		}
	}
}
</style>
<style lang="less">
/*名称展示样式*/
​.amap-marker-label {
	/* width: 86px; */
	height: 20px;
	background: transparent;
	border: 0px;
	line-height: 18px;
}

​ ​.amap-container {
	background: none !important;
}
</style>